<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="40%"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-top-panel>
        <h3>当天欢迎语发送总次数: {{ welcome_msg_total }}</h3>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支*持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        width="auto"
      >
        <template #default="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.page_size"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </el-dialog>
</template>

<script>
  import { getWeComStatisticList } from '@/api/enterpriseWeChat/weCom'
  import { Plus, Search } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'TableStatisticListEdit',
    components: {},
    setup() {
      const state = reactive({
        editBookRef: null,
        title: '',
        columns: [
          {
            label: 'ID',
            prop: 'id',
          },
          {
            label: '欢迎语发送次数',
            prop: 'welcome_msg_count',
          },
          {
            label: '日期',
            prop: 'create_date',
          },
        ],
        height: 400,
        layout: 'total, sizes, prev, pager, next, jumper',
        welcome_msg_total: '',
        total: 0,
        queryForm: {
          page: 1,
          page_size: 10,
          open_kfid: '',
        },
        list: [],
        border: true,
        stripe: false,
        listLoading: true,
        dialogFormVisible: false,
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const showEdit = async (open_kfid) => {
        state.title = '客服数据统计列表'
        state.queryForm.open_kfid = open_kfid
        statisticListData()
        state.dialogFormVisible = true
      }
      const handleSizeChange = (val) => {
        state.queryForm.page_size = val
        const pageMax = Math.ceil(state.total / val)
        if (state.queryForm.page <= pageMax) {
          statisticListData()
        }
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        statisticListData()
      }
      const statisticListData = async () => {
        state.listLoading = true
        const { data } = await getWeComStatisticList(state.queryForm)
        console.log(data)
        if (data) {
          state.welcome_msg_total = data.welcome_msg_total
          state.list = data.list.list
          state.total = data.list.total
        }
        state.listLoading = false
      }
      const imageFun = (row) => {
        const list = []
        list.push(row.avatar)
        return list
      }
      const close = () => {
        state.list = []
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        finallyColumns,
        Plus,
        Search,
        imageFun,
        handleSizeChange,
        handleCurrentChange,
      }
    },
  })
</script>
<style lang="scss" scoped></style>
